<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar :backgroundColor="`var(--bg-27)`" :border="false" @clickLeft="clickLeft">
				<text class="page-title">{{pageName}}</text>
				<view class="left-icon" slot="left"> </view>
			</uni-nav-bar>
			<!-- <cuCustom title="pageName"> </cuCustom> -->
		</match-media>
		<view class="content">
			<match-media :min-width="MAX_SIZEiZE">
				<view class="pc-back" @click="clickLeft">
					<view class="back-cont">
						<view class="back-icon"> </view>
						<view class="back-text"> {{$t('Page.notify.back')}} </view>
					</view>
					<text class="page-title">{{pageName}}</text>
				</view>
			</match-media>
			<scroll-view refresher-default-style="white" refresher-background="transparent" refresher-enabled
				scroll-with-animation :refresher-triggered="triggered" @refresherrefresh="refresherrefresh"
				:scroll-top="scrollTop" @scroll="onScroll" scroll-y="true" :style="{height:scrollHeight}"
				class="scroll-Y">
				<view class="slot_list">
					<view :class="['slot_item animate-slot-item']" v-for=" gameItem,gameIndex in gameList"
						:key="'game'+gameIndex">
						<view class="adaptCar-wrap">
							<adaptCar :src="gameItem.gamepic" :isMaintain="gameItem.catestatus === 'mainte'"
								@onTap="clickGameurl(gameItem,gameIndex)"></adaptCar>
						</view>
						<view class="game-props">
							<view class="game-props-item">
								<image class="game-props-icon" src="@/static/image/Home/game-collected.png"
									mode="aspectFit"></image>
								<text class="game-props-text">{{ transformNum(gameItem.collectnum) }}</text>
							</view>
							<view class="game-props-item">
								<image class="game-props-icon" src="@/static/image/Home/game-hot.png" mode="aspectFit">
								</image>
								<text class="game-props-text"> {{ transformNum(gameItem.hotnum) }}</text>
							</view>
						</view>
						<view class="play-btn" @click="clickGameurl(gameItem,gameIndex)">{{$t('Page.home.play')}}</view>
					</view>
				</view>
				<view class="loadMoreWrap">
					<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
				</view>
			</scroll-view>
		</view>
		<backToTop :isShow="isShow" @scrollToTop="scrollToTop"></backToTop>
	</view>
</template>
<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		goGamePang
	} from '@/utils/routerJump.js'
	export default {
		components: {
			pcNavBar,
			cuCustom
		},
		data() {
			return {
				MAX_SIZEiZE,
				gameTypeList: [{
					gameName: '',
					gameNumber: 0
				}],
				scrollTop: 0,
				searchParams: {
					cate_id: '',
					order: '2',
					page: 1,
					page_ini: 25,
					gamename: ''
				},
				gameList: [],
				totalCount: 0,
				curGameCateInfo: null,
				seachText: '',
				showType: false,
				isFocus: false,
				status: 'loading', //  more/loading/noMore	
				contentText: {
					contentdown: this.$t('Page.loadmore.xl'),
					contentrefresh: this.$t('Page.loadmore.jzz'),
					contentnomore: this.$t('Page.loadmore.mygdl')
				},
				pageName: this.$t('Page.mine.myCollection'),
				isShow: false, // 控制是否显示返回顶部按钮
				triggered: false,
				triggerHeight: Math.ceil(uni.getSystemInfoSync().windowHeight / 2.5),
				intersectionObserver: null,
				maxPage: 0
			}
		},
		watch: {
			totalCount: {
				handler(newVal) {
					if (newVal) {
						const remainder = this.totalCount % this.searchParams.page_ini
						const countPage = this.totalCount / this.searchParams.page_ini
						this.maxPage = remainder === 0 ? countPage : Math.floor(countPage) + 1
						this.initIntersectionObserver()
					}
				}
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				windowSize: state => state.app.windowSize
			}),
			...mapGetters('app', ['isLogin']),
			scrollHeight() {
				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
				if (this.windowSize.windowWidth <= 768) {
					return 'calc(100vh - 44px - var(--status-bar-height))'
				} else {
					return 'calc(100vh - 70px - 70px)'
				}
			},
		},
		onLoad(option) {
			if (option.item) {
				const item = JSON.parse(decodeURIComponent(option.item));
				this.pageName = item.name.toUpperCase()
				this.searchParams.cate_id = item.id
				this.getSubGame()
			}
		},
		destroyed() {
			if (this.intersectionObserver) {
				this.intersectionObserver.disconnect()
			}
		},
		methods: {
			initIntersectionObserver() {
				this.intersectionObserver = uni.createIntersectionObserver(this);
				this.intersectionObserver.relativeTo('.page-wrap').observe('.loadMoreWrap', (res) => {
					console.log('res.intersectionRatio : ', res.intersectionRatio);
					console.log('this.searchParams.page < this.maxPage : ', this.searchParams.page < this.maxPage);
					console.log('this.searchParams.page: ', this.searchParams.page);
					console.log('this.maxPage: ', this.maxPage);
					if (res.intersectionRatio > 0 && this.searchParams.page < this.maxPage) {
						if (this.searchParams.page >= 1) {
							this.searchParams.page++
						}
						console.log('当前请求页数: ', this.searchParams.page);
						this.getSubGame();
					}
				})
			},
			scrollToTop(e) {
				this.scrollTop = 0
				this.isShow = e
			},
			refresherrefresh(e) {
				this.triggered = true
				this.gameList = [];
				this.searchParams.page = 1;
				this.getSubGame();
				this.scrollToTop(false);
			},

			onScroll: Debounce(function(e) {
				this.scrollTop = e.detail.scrollTop
				if (e.detail.scrollTop >= this.triggerHeight) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			}, 500),

			getSubGame() {
				this.status = 'loading'
				// 全部分类游戏
				const {
					GAMEINDEX
				} = this.$api
				sendMessage({
					flag: GAMEINDEX,
					content: this.searchParams
				})
				uni.$once(GAMEINDEX, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.triggered = false
						if (this.searchParams.page === 1) {
							this.gameList = data.list
							this.totalCount = data.count
						} else {
							this.gameList = [...this.gameList, ...data.list]
						}
						console.log('this.gameList.length: ', this.gameList.length);
						if (this.gameList.length < this.totalCount) {
							setTimeout(() => {
								this.status = 'more'
							}, 1000)
						} else {
							this.status = 'noMore'
						}
					}
				})
			},
			lower(e) {
				if (this.gameList.length < this.totalCount) {
					this.searchParams.page++
					this.getSubGame()
					this.status = 'loading'
				} else {
					this.status = 'noMore'
				}
			},
			clickLeft() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			// 转换收藏量和热度单位
			transformNum(number) {
				number = parseInt(number)
				// 1e3为10的三次幂=1000 1e4=10000 1e7=10000000(百万)
				if (number < 1e3) {
					return number
				} else if (number >= 1e3 && number < 1e4) {
					return `${(number / 1e3).toFixed(1)}K`
				} else if (number >= 1e4 && number < 1e6) {
					return `${(number / 1e4).toFixed(1)}W`
				} else if (number >= 1e6 && number < 1e7) {
					return `${(number / 1e6).toFixed(1)}M`
				} else if (number >= 1e7 && number < 1e8) {
					return `${(number /1e7 ).toFixed(1)}kw`
				}
			},

			PlayGame(item, index) {
				console.log('playGame');
				goGamePang({
					id: item.id,
					name: item.game_name,
					namecode: item.namecode,
					gamepic: item.gamepic
				})
			},

			// 进入游戏做防抖操作
			clickGameurl: Debounce(function(item, index) {
				this.PlayGame(item, index);
			}, 1000),
		},
	};
</script>

<style lang="scss" scoped>
	// 默认样式 结构   
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height));
			padding: 0 15px;
			background: var(--bg-3);
			overflow-y: scroll;
			box-sizing: border-box;

			.scroll-Y {
				padding-top: 15px;
				overflow-y: scroll;

				/* 隐藏竖向滚动条 */
				::-webkit-scrollbar {
					display: none;
				}

				.slot_list {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
					// grid-template-columns: 1fr 1fr 1fr;
					/* 三列等宽 */
					gap: 20px;

					.slot_item {
						width: 100%;
						border-radius: 16px;
						background: var(--bg-12);
						box-shadow: inset 0px 1px 1px 0px var(--color-10);
						padding: 10px;
						border-raduis: 15px;
						box-sizing: border-box;

						.adaptCar-wrap {
							padding: 0 8px 5px;
						}

						.game-props {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.game-props-item {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: flex-start;

								.game-props-icon {
									width: 15px;
									height: 15px;
									margin-right: 2px;
								}

								&:nth-child(2) {
									justify-content: flex-end;
								}

								.game-props-text {
									color: var(--color-11);
									font-size: 12px;
								}
							}
						}

						.play-btn {
							width: calc(100% - 24px);
							height: 20px;
							line-height: 20px;
							text-align: center;
							margin: 10px auto 0;
							font-weight: bold;
							font-size: 12px;
							background: var(--bg-13);
							box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
							border-radius: 100px;
							color: var(--color-7);
							cursor: pointer;
						}
					}

					@keyframes translateTop {
						from {
							opacity: 0;
							transform: translateY(20px)
						}

						to {
							opacity: 1;
							transform: translateY(0)
						}
					}

					.animate-slot-item {
						animation: translateTop 1s ease-in-out;
					}

				}
			}
		}
	}

	// PC
	@media screen and (min-width: 768px) {

		.page-wrap {
			padding-top: 70px;
			min-height: 100vh;
			background: var(--bg-3);

			.pc-back {
				width: 100%;
				padding: 0 30px;
				height: 60px;
				display: flex;
				align-items: center;
				background: var(--bg-24);
				border-radius: 30px;
				margin: 10px auto 0;
				box-sizing: border-box;

				.back-cont {
					display: flex;
					align-items: center;
					height: 30px;
					padding: 0 10px;
					border-radius: 100px;
					background: var(--bg-25);
					cursor: pointer;

					.back-icon {
						width: 13px;
						height: 11px;
						background: url('@/static/image/back-icon.png') no-repeat;
						background-size: contain;
					}

					.back-text {
						font-size: 13px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 18px;
						margin-left: 5px;
					}
				}

				.page-title {
					width: fit-content !important;
					margin-left: 15px;
				}
			}

			.content {
				width: 100%;
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				background: var(--bg-3);
				padding: 0 30px;
				box-sizing: border-box;

				.slot_list {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
					/* 三列等宽 */
					gap: 30px !important;
				}
			}
		}
	}
</style>